<template>
  <div class="cerate">
    <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="120px" class="demo-ruleForm">
      <el-form-item label="文章标题" prop="title">
        <el-input v-model="ruleForm.title" type="text" autocomplete="off" />
      </el-form-item>
      <el-form-item label="上传图片">
        <el-upload ref="upload" action="#" list-type="picture-card" :auto-upload="false" :multiple="false" :limit="1"
          :on-exceed="handleExceed" :on-change="Uploadanimage">
          <el-icon>
            <Plus />
          </el-icon>
          <template #file="{ file }">
            <div>
              <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
              <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-delete" @click="handleRemove(file)">
                  <el-icon>
                    <Delete />
                  </el-icon>
                </span>
              </span>
            </div>
          </template>
        </el-upload>
      </el-form-item>
      <el-form-item label="文章内容" prop="content">
        <editor id="tinymce" v-model="ruleForm.content" :init="init"></editor>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="fbadd">发布文章</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang='ts'  setup>
import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'
import {getfile,getpostsfb} from "../utlis/api"
import type { FormInstance, FormRules } from 'element-plus'
import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus'
import { genFileId ,ElMessage} from 'element-plus'
import { ref, reactive, toRefs, onMounted } from 'vue'
import { useStore } from 'vuex'
import { useRouter, useRoute } from 'vue-router'
import tinymce from "tinymce/tinymce";
import "tinymce/themes/silver/theme";
import Editor from "@tinymce/tinymce-vue"; // 引入组件
// 都是富文本插件
import "tinymce/icons/default";
import "tinymce/plugins/image";
import "tinymce/plugins/link";
import "tinymce/plugins/code";
import "tinymce/plugins/table";
import "tinymce/plugins/lists";
import "tinymce/plugins/wordcount";
const router = useRouter()
const route = useRoute()
const store = useStore()
const upload = ref<UploadInstance>()

  const ruleForm = reactive({
  title: "",
  content:"",
  image: "",
  column:"",
  author:"",
})
const rules = reactive<FormRules>({
  title: [
    { required: true, message: '请输入标题', trigger: 'blur' },
  ]
})

const handleExceed: UploadProps['onExceed'] = (files) => {
  upload.value!.clearFiles()
  const file = files[0] as UploadRawFile
  file.uid = genFileId()
  upload.value!.handleStart(file)
}
// 上传图片
const Uploadanimage = (file: any) => {
  if (file) {
    const formDatas = new FormData
    formDatas.append("img", file.raw)
    getfile(formDatas).then(res => {
      console.log(82,res);
      ruleForm.image =res.data._id
    })
  }
}
const fbadd=()=>{
  getpostsfb({...ruleForm,author:store.state._id,column:store.state.column}).then(res=>{
    console.log(949494,res);
  })
}

// 富文本编译器
const init = {
  //初始化数据
  language_url: "/langs/zh-Hans.js", // 引入语言包（该语言包在public下，注意文件名称）
  language: "zh-Hans", // 这里名称根据 zh-Hans.js 里面写的名称而定
  skin_url: "/skins/ui/oxide", // 这里引入的样式
  height: 300, // 限制高度
  plugins: "link lists image code table wordcount", // 富文本插件
  toolbar:
    "bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat",
  branding: false, // //是否禁用“Powered by TinyMCE”
  menubar: true, //顶部菜单栏显示
  // paste_convert_word_fake_lists: false, // 插入word文档需要该属性
  content_css: "/skins/content/default/content.css", //以css文件方式自定义可编辑区域的css样式，css文件需自己创建并引入
  images_upload_handler: (blobInfo) =>
    new Promise((resolve, reject) => {
      // console.log(blobInfo.blob());
      // 上传图片需要，FormData 格式的文件；
      const formDataUp = new FormData();
      // img  是接口需要的上传的属性名，一般属性名是 file
      formDataUp.append("img", blobInfo.blob());
      // // console.log(formDataUp);
      axios.post("xxxx", formDataUp).then((res) => {
        resolve("返回的上传图片后的地址");
      });
    }),
};
onMounted(() => {
  tinymce.init({}); // 初始化富文本
});
</script>

<style scoped lang='scss'>
.cerate {
  width: 1000px;
  margin: auto;
}
</style>